<template>
    <el-drawer title="物流信息" v-model="dialogVisible" size="30%">
        <el-card shadow="never" :body-style="{ padding: '20px' }" class="mb-3 border-0">
            <div class="flex items-center">
                <el-image :src="info.logo" fit="cover" :lazy="true" style="width: 60px; height: 60px;"
                    class=" rounded border mx-2" ></el-image>
                <div>
                    <p>物流公司{{ info.typename }}</p>
                    <p>物流单号{{ info.number }}</p>
                </div>
            </div>
        </el-card>
        <el-card shadow="never" :body-style="{ padding: '20px' }" class="border-0 border-t">
            <el-timeline >
                <el-timeline-item :timestamp="item.time" placement="top" v-for="(item,index) in info.list" :key="index">
                {{ item.status }}
            </el-timeline-item>
            </el-timeline>
            
        </el-card>

    </el-drawer>

</template>

<script setup>
import { ref } from "vue"
import { getShipInfo } from "~/api/order.js"
import { toast } from '~/composables/util.js';

const dialogVisible = ref(false);
const info = ref({});
const open = (id) => {
    dialogVisible.value = true;
    return getShipInfo(id).then(res => {
        if (res.status != 0) {
            return toast(res.msg, "error")
        } else {
            info.value = res.result
            dialogVisible.value = true;
        }
        
    })
}
defineExpose({
    open
})
</script>